<template>
  <div class="map-container">
    <div ref="mapContainerDom" class="map-container"></div>
  </div>
</template>

<script lang="ts" setup>
import { OlUtil } from '../../lib/index'
import { onMounted, nextTick, ref, onBeforeUnmount } from 'vue'
import { Map } from 'ol'
import { get, Projection, transform } from 'ol/proj'
import proj4 from 'proj4'
import { register } from 'ol/proj/proj4'
import gcoord from 'gcoord'

// 84坐标转火星坐标
const res = gcoord.transform([114.305556, 22.543056], gcoord.WGS84, gcoord.GCJ02)
console.log(res, '---res');

const mapConfig = {
  defaultShowMap: 'img',
  imgMapType: 'WMTS',
  imgMapUrl: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer',
  vecMapType: 'XYZ',
  vecMapUrl: 'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
  projectionCode: 'EPSG:3857',
  center: [81.8018641, 41.7792352],
  zoom: 15,
  maxZoom: 20,
  minZoom: 4,
  imgBaseUrl: ''
}

const olutil = new OlUtil()
let map: Map
const mapLoaded = ref(false)
let observer: ResizeObserver | null = null // 地图dom大小监听
const mapContainerDom = ref() // 地图容器

let mapProjection: Projection | undefined
const projectionCode = mapConfig.projectionCode || 'EPSG:3857'
if (projectionCode === 'EPSG:4490') {
  mapProjection = olutil.defineProjection_4490()
} else {
  mapProjection = get(projectionCode) as Projection
}
let ram: any
if (mapProjection) {
  ram = olutil.getResolutionsAndMids(mapProjection) // 获取分辨率和层级矩阵
}
const showMapType = ref(mapConfig.defaultShowMap) // 当前显示底图类型

// 加载地图
const loadMap = (id: string, mapUrl: string, type: string) => {
  let layer
  if (type === 'XYZ') {
    layer = olutil.loadXYZLayer({
      id,
      url: mapUrl,
      projection: mapConfig.projectionCode,
      crossOrigin: 'anonymous'
    })
  } else if (type === 'WMTS') {
    layer = olutil.loadWMTSLayer({
      id,
      url: mapUrl,
      matrixSet: 'default028mm',
      projection: mapProjection,
      resolutions: ram.resolutions,
      matrixIds: ram.matrixIds,
      crossOrigin: 'anonymous'
    })
  }
  layer && layer.setVisible(mapConfig.defaultShowMap === id)
  return layer
}
// 初始化地图
const initMap = () => {
  const vecMapLayer = loadMap('vec', mapConfig.vecMapUrl, mapConfig.vecMapType)
  const imgMapLAyer = loadMap('img', mapConfig.imgMapUrl, mapConfig.imgMapType)

  map = olutil.initMap(mapContainerDom.value, {
    // projection: 'EPSG:3857',
    center: mapConfig.center || [87.62, 43.83],
    zoom: mapConfig.zoom || 8,
    minZoom: mapConfig.minZoom || 6,
    maxZoom: mapConfig.maxZoom || 18,
    layers: [imgMapLAyer!, vecMapLayer!]
  })
}

// 注册4490投影
const defineProjection4490 = () => {
  proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs +type=crs') // 定义4490投影
  register(proj4) // 注册4490投影
}


onMounted(() => {
  initMap()
  nextTick(() => {
    map &&
      map.once('rendercomplete', () => {
        mapLoaded.value = true
        // 监听地图dom大小变化
        observer = new ResizeObserver(() => {
          map && map.updateSize()
        })
        observer.observe(mapContainerDom.value)

        defineProjection4490()
        console.log(get('EPSG:4490'))
        const a =  transform([80.1111111111,40.1111111111], 'EPSG:4490', 'EPSG:4326')
        console.log(a, '---a');
      })
  })
})
onBeforeUnmount(() => {
  try {
    observer && observer.unobserve(mapContainerDom.value) // 移除监听
  } catch (err) {
    console.log(err)
  }
})
</script>
<script lang="ts">
export default {
  name: 'BaseMap'
}
</script>
<style lang="scss" scoped>
.map-container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  .base-map-ctl {
    position: absolute;
    right: 0.2rem;
    bottom: 0.1rem;
    display: flex;
    background: rgba(31, 30, 30, 0.5);
    box-shadow: 2px 2px rgba(0, 0, 0, 0.4);
    border-radius: 3px;
    padding: 0.1rem;
    .map-type-img {
      height: 60px;
      width: 86px;
      cursor: pointer;
      border: 2px solid transparent;
    }

    .map-type-img-selected {
      border: 2px solid #2d8cf0;
    }
    .map-type-img:last-child {
      margin-left: 0.05rem;
    }
  }
  .map-ctl {
    position: absolute;
    left: 0.2rem;
    top: 0.2rem;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.5);
    padding: 0.1rem 0.08rem;
    border-radius: 4px;
    .map-ctl-item {
      margin-bottom: 0.1rem;
    }
    .map-ctl-item:last-child {
      margin-bottom: 0;
    }
  }
  .get-position-title {
    position: absolute;
    border: 1px solid #2d8cf0;
    background: white;
    padding: 0 4px;
    border-radius: 5px;
    pointer-events: none;
  }
}
</style>
